require('./style.css');
class Tab{
    constructor(str){
      //属性
      this.parent=document.querySelector(str);
      this.aBtnList=this.parent.querySelectorAll('input');
      this.aLiList=this.parent.querySelectorAll('li');
      //初始化事件
      this.show();
    }
    show(){
      let _this=this;
      for(let i=0; i<this.aBtnList.length;i++){
        this.aBtnList[i].onclick=function(){
          _this.index=i;
          _this.fn(i);  
        };
      }   
    }
    fn(i){
      for(var j=0;j<this.aLiList.length;j++){
        this.aBtnList[j].className='';
        this.aLiList[j].className='';
      }
      this.aLiList[i].className='show';
      this.aBtnList[i].className='active';    
    }
  }
  
  class AutoPlayTab extends Tab{
    constructor(str){
      //继承属性
      super(str);
      this.autoFn();
      this.index=0;
    }
    autoFn(){
      var _this=this;
      
      setInterval(function(){
          _this.index++
          if(_this.index==_this.aBtnList.length){ 
            _this.index=0;                
          }
          _this.fn(_this.index);
      },2000);  
    }
  }
  class Tab2{
        constructor(obj){
            this.parent=document.querySelector(obj);
            this.btn=this.parent.querySelectorAll("input");
            this.ul=this.parent.querySelector("ul")
            this.li=this.parent.querySelectorAll("li")
            this.num=0;
            this.sum=2;
            this.zuo()
            this.you()
        }
       zuo(){
           let that=this;
           that.btn[0].onclick=function () {
               that.num++;
               if(that.num==that.li.length){
                   that.num=0;
               }
               that.ul.style.left=-that.num*300+"px"
           }
       }
        you(){
            let that=this;
            that.btn[1].onclick=function () {
                that.sum--;
                if(that.sum<0){
                    that.sum=2;
                }
                that.ul.style.left=-that.sum*300+"px"
            }
        }
    }
  window.onload=function(){
    new Tab('#tab2');
    new AutoPlayTab('#tab');
    new Tab2("#tab3")
  }